<template>
	<li>
		<label>
			<input type="checkbox" v-model="checked" />
			<span>{{ todo.name }}</span>
		</label>
		<button class="btn btn-danger" @click="del">删除</button>
	</li>
</template>

<script>
import { mapMutations } from "vuex";

export default {
	name: "TodoItem",
	props: {
		todo: {
			type: Object,
			required: true,
		},
	},
	computed: {
		checked: {
			get() {
				return this.todo.isDone;
			},
			set() {
				this.UPDATE_TODO_IS_DONE(this.todo.id);
			},
		},
	},
	methods: {
		...mapMutations("todoList", ["UPDATE_TODO_IS_DONE", "DEL_TODO"]),
		del() {
			this.DEL_TODO(this.todo.id);
		},
	},
};
</script>

<style>
/*item*/
li {
	list-style: none;
	height: 36px;
	line-height: 36px;
	padding: 0 5px;
	border-bottom: 1px solid #ddd;
}

li label {
	float: left;
	cursor: pointer;
}

li label li input {
	vertical-align: middle;
	margin-right: 6px;
	position: relative;
	top: -1px;
}

li button {
	float: right;
	display: none;
	margin-top: 3px;
}

li:hover button {
	display: block;
}

li:before {
	content: initial;
}

li:last-child {
	border-bottom: none;
}
</style>
